<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>BookList</title>
    <link href="/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
</head>
<body>




<div class="layui-container">

    <br>
    <br>
    <button type="button" class="layui-btn" th:attr='bookTypeId=${bookTypeId}' id="addBookToType">
        <i class="layui-icon">&#xe608;</i>添加
    </button>
    <table class="layui-table" lay-skin="line" lay-size="lg">
        <colgroup>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>册编号</th>
            <th>书籍名称</th>
            <th>作者</th>
            <th>出版社</th>
            <th>详细信息</th>
            <th>是否可借</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr th:each="book: ${bookList}">
            <td th:text="${book.bookId}"></td>
            <td th:text="${book.title}"></td>
            <td th:text="${book.author}"></td>
            <td th:text="${book.publisher}"></td>
            <td th:text="${book.details}"></td>
            <td>
                <span th:if="${book.state} eq '0'">可借出</span>
                <span th:if="${book.state} ne '0'">已借出</span>
            </td>
            <td>
                <div class="layui-btn-group" sec:authorize="hasRole('ROLE_ADMIN')">
                    <button type="button" class="layui-btn bookDeleteButton" th:attr='del-url=@{/manager/deleteBook/}+${book.bookId}'>删除</button>
                    <button type="button" class="layui-btn bookBorrowButton" th:if="${book.state} eq '0'" th:attr='borrow-url=@{/manager/borrowBook/}+${book.bookId}'>借出</button>
                    <button type="button" class="layui-btn bookReturnButton" th:if="${book.state} ne '0'" th:attr='return-url=@{/manager/returnBook/}+${book.bookId}'>归还</button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

</div>
<script>
    layui.use(["jquery","layer"],function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        $(".bookDeleteButton").on("click",function(data){
            var del_url = $(this).attr("del-url");
            $.post({
                url:del_url,
                data:del_url,
                success:function(data){
                    layer.msg(data);
                    location.reload();
                },
                error:function(data){
                    layer.msg(data);
                    location.reload();
                }
            });
        });
        $(".bookBorrowButton").on("click",function(data){
            var borrow_url = $(this).attr("borrow-url");
            var borrow_user_id = 0;
            layer.prompt({
                title: '输入用户编号!',
                formType: 1 },
                function(text, index){
                    layer.close(index);
                    <!--layer.msg(borrow_url+"/"+text);-->
                    $.post({
                        url:borrow_url+"/"+text,
                        data:borrow_url+"/"+text,
                        success:function(data){
                            location.reload();
                        },
                        error:function(data){
                            location.reload();
                        }
                    });
            });
        });
        $(".bookReturnButton").on("click",function(data){
            var return_url = $(this).attr("return-url");
            $.post({
                url:return_url,
                data:return_url,
                success:function(data){
                    location.reload();
                },
                error:function(data){
                    location.reload();
                }
            });
        });

        $("#addBookToType").on("click",function(){
            var bookType=$(this).attr("bookTypeId");
            $.post({
                url:"/manager/addBook/"+bookType,
                data:bookType,
                success:function(data){
                    location.reload();
                },
                error:function(data){
                    location.reload();
                }
            });
        });
    })
</script>

</body>
</html>